<template>
	<view class="container">
		<form>
			<!-- 商品名称 -->
			<view class="header">
				<view class="title-section">
					<input 
						type="text" 
						v-model="goodsName" 
						placeholder="填写商品名称" 
						placeholder-class="placeholder"
						class="title-input"
					/>
					<text class="title-action">添加关于此次商品的说明，详尽完善的信息填写有助于买家购买</text>
				</view>
			</view>
			
			<!-- 商品说明 -->
			<view class="settings-list">
				<view class="setting-item description">
					<view class="setting-title">商品名称</view>
					<view class="setting-value">
						<input 
							v-model="goodsName" 
							placeholder="输入商品名称" 
							placeholder-class="placeholder"
							class="name-input"
						/>
					</view>
				</view>
			
				<!-- 商品图片 -->
				<view class="upload-section">
					<view class="image-list">
						<view class="image-item" v-for="(item, index) in imageList" :key="index">
							<image :src="item" mode="aspectFill" class="preview-image"></image>
							<view class="delete-btn" @click.stop="deleteImage(index)">
								<text class="delete-icon">×</text>
							</view>
						</view>
						<view class="upload-box" @click="uploadImage" v-if="imageList.length < 3">
							<view class="plus-icon"></view>
						</view>
					</view>
				</view>
				
				<!-- 商品价格 -->
				<view class="setting-item">
					<view class="setting-title">商品价格</view>
					<view class="setting-value">
						<input 
							type="number" 
							v-model="price" 
							placeholder="输入金额" 
							placeholder-class="placeholder"
							class="price-input"
						/>
					</view>
				</view>
				
				<!-- 快递运费 -->
				<view class="setting-item">
					<view class="setting-title">快递运费</view>
					<view class="setting-value" @click="toggleExpressDropdown">
						<text>{{selectedExpress || '全国包邮'}}</text>
						<text class="setting-arrow">></text>
					</view>
					<view v-if="expressDropdownVisible" class="dropdown-content express-dropdown">
						<view class="dropdown-item" :class="{ 'selected': selectedExpress === '全国包邮' }" @click="selectExpress('全国包邮')">
							<text class="express-text">全国包邮</text>
							<text class="check-icon" v-if="selectedExpress === '全国包邮'">✓</text>
						</view>
						<view class="dropdown-item" :class="{ 'selected': selectedExpress === '全国 ¥6' }" @click="selectExpress('全国 ¥6')">
							<text class="express-text">全国 ¥6</text>
							<text class="check-icon" v-if="selectedExpress === '全国 ¥6'">✓</text>
						</view>
						<view class="dropdown-item" :class="{ 'selected': selectedExpress === '全国 ¥18' }" @click="selectExpress('全国 ¥18')">
							<text class="express-text">全国 ¥18</text>
							<text class="check-icon" v-if="selectedExpress === '全国 ¥18'">✓</text>
						</view>
						<view class="dropdown-item dynamic-fee" @click="goToExpressSettings">
							<view class="dynamic-fee-left">
								<text class="express-text">动态运费</text>
								<text class="express-desc">无预售商品（需运营审核）设置不同价格</text>
							</view>
							<text class="go-settings">去设置 ></text>
						</view>
					</view>
				</view>
				
				<!-- 库存数量 -->
				<view class="setting-item">
					<view class="setting-title">库存数量</view>
					<view class="setting-value">
						<input 
							type="number" 
							v-model="stock" 
							placeholder="输入数量" 
							placeholder-class="placeholder"
							class="stock-input"
						/>
					</view>
				</view>
				
				<!-- 商品图文介绍 -->
				<view class="setting-item description">
					<view class="setting-title">商品图文介绍</view>
					<view class="setting-value">
						<textarea 
							v-model="goodsDetail" 
							placeholder="商品图文介绍" 
							placeholder-class="placeholder"
							class="description-input"
						/>
					</view>
				</view>
			</view>

			<!-- 高级设置 -->
			<view class="promotion-section">
				<!-- <view class="promotion-item">
					<view class="promotion-left">
						<text class="promotion-text">开启促销活动</text>
						<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
					</view>
					<switch :checked="startPromotion" @change="startPromotion = $event.detail.value" class="promotion-switch" />
				</view> -->
				<!-- <view class="promotion-item">
					<view class="promotion-left">
						<text class="promotion-text">发布到首页</text>
						<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
					</view>
					<switch :checked="toFirstPage" @change="toFirstPage = $event.detail.value" class="promotion-switch" />
				</view> -->
				<!-- <view class="promotion-item">
					<view class="promotion-left">
						<text class="promotion-text">开启分享佣金</text>
						<image src="/static/icons/question.png" mode="aspectFit" class="question-icon"></image>
					</view>
					<switch :checked="enableCommission" @change="enableCommission = $event.detail.value" class="promotion-switch" />
				</view> -->
			</view>
			
			<!-- 底部按钮 -->
			<view class="bottom-buttons">
				<button class="submit-btn">发起</button>
			</view>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsName: '',
			goodsDescription: '',
			price: '',
			expressDropdownVisible: false,
			selectedExpress: '全国包邮',
			stock: '',
			goodsDetail: '',
			advancedDropdownVisible: false,
			startPromotion: false,
			toFirstPage: false,
			enableCommission: false,
			imageList: []
		}
	},
	methods: {
		toggleExpressDropdown() {
			this.expressDropdownVisible = !this.expressDropdownVisible
		},
		toggleAdvancedDropdown() {
			this.advancedDropdownVisible = !this.advancedDropdownVisible
		},
		selectExpress(type) {
			this.selectedExpress = type
			this.expressDropdownVisible = false
		},
		uploadImage() {
			// 实现图片上传功能
			const count = 3 - this.imageList.length; // 计算还可以选择的图片数量
			uni.chooseImage({
				count: count,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					// 将新选择的图片添加到列表中
					this.imageList = [...this.imageList, ...tempFilePaths];
					
					// 实际项目中，这里应该调用上传接口
					// tempFilePaths.forEach(path => {
					//     this.uploadImage(path);
					// });
				},
				fail: (err) => {
					console.error('选择图片失败：', err);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		submitGoods() {
			// 实现提交功能
		},
		goToExpressSettings() {
			// 跳转到运费设置页面
			uni.navigateTo({
				url: '/pages/express/settings'
			})
		},
		deleteImage(index) {
			// 实现删除图片功能
			this.imageList.splice(index, 1)
		}
	}
}
</script>

<style>
.container {
	padding: 30rpx;
	background-color: #f8f8f8;
	padding-bottom: 120rpx;
}

.header {
	margin-bottom: 30rpx;
}

.title-section {
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.title-input {
	font-size: 32rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
	flex: 1;
}

.title-action {
	font-size: 28rpx;
	color: #ff6b00;
	margin-left: 20rpx;
}

.subtitle {
	font-size: 26rpx;
	color: #999;
	line-height: 1.5;
}

.settings-list {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
}

.setting-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.setting-item:last-child {
	border-bottom: none;
}

.setting-title {
	font-size: 28rpx;
	color: #333;
}

.setting-value {
	flex: 1;
	margin-left: 30rpx;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.setting-arrow {
	margin-left: 10rpx;
	color: #999;
}

.price-input, .stock-input {
	width: 200rpx;
	text-align: right;
	font-size: 28rpx;
	height: 80rpx;
	padding: 0 20rpx;
}

.description-input {
	width: 100%;
	height: 160rpx;
	font-size: 28rpx;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
}

.upload-section {
	padding: 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
}

.image-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.image-item {
	width: 200rpx;
	height: 200rpx;
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;
}

.preview-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.delete-btn {
	position: absolute;
	top: 8rpx;
	right: 9rpx;
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.delete-icon {
	font-size: 40rpx;
	line-height: 1;
	color: #ff0000;
	transform: translateY(-4rpx);
}

.upload-box {
	width: 200rpx;
	height: 200rpx;
	background-color: #f8f8f8;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12rpx;
	position: relative;
}

.plus-icon {
	width: 60rpx;
	height: 60rpx;
	position: relative;
}

.plus-icon::before,
.plus-icon::after {
	content: '';
	position: absolute;
	background-color: #999;
}

.plus-icon::before {
	width: 2rpx;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.plus-icon::after {
	width: 100%;
	height: 2rpx;
	top: 50%;
	transform: translateY(-50%);
}

.promotion-section {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
}

.promotion-item {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.promotion-item:last-child {
	border-bottom: none;
}

.promotion-left {
	display: flex;
	align-items: center;
}

.question-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: 10rpx;
}

.bottom-buttons {
	display: flex;
	justify-content: center;
	padding: 30rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.submit-btn {
	width: 90%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	font-size: 28rpx;
	background-color: #ff6b00;
	color: #fff;
}

.placeholder {
	color: #999;
}

.express-dropdown {
	position: fixed;
	top: 50%;
	left: 30rpx;
	right: 30rpx;
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 1000;
	border-radius: 12rpx;
	max-height: 600rpx;
	overflow-y: auto;
}

.dropdown-item {
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.dropdown-item:last-child {
	border-bottom: none;
}

.dropdown-item.selected {
	background-color: #f8f8f8;
}

.check-icon {
	color: #ff6b00;
	font-size: 32rpx;
}

.dynamic-fee {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dynamic-fee-left {
	flex: 1;
}

.express-text {
	font-size: 28rpx;
	color: #333;
}

.express-desc {
	font-size: 24rpx;
	color: #999;
	display: block;
	margin-top: 10rpx;
}

.go-settings {
	font-size: 28rpx;
	color: #ff6b00;
}

.name-input {
	width: 100%;
	font-size: 28rpx;
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
}

.promotion-text {
	font-size: 28rpx;
	color: #333;
}

.promotion-switch {
	transform: scale(0.8);
	transform-origin: right center;
}
</style>